<template>
  <div class="dashboard-container">
    <el-row :gutter="10" class="mar_bot_10">
      <el-col :span="6">
        <el-card>
          <div slot="header" class="align_center">今日访问</div>
          <div class="flex_row">
            <div class="row_value">0</div>
            <svg-icon icon-class="dashboard_fangwen"></svg-icon>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="align_center">提交次数</div>
          <div class="flex_row">
            <div class="row_value">0</div>
            <svg-icon icon-class="dashboard_tijiao"></svg-icon>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="align_center">下载数量</div>
          <div class="flex_row">
            <div class="row_value">0</div>
            <svg-icon icon-class="dashboard_xiazai"></svg-icon>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div slot="header" class="align_center">流量统计</div>
          <div class="flex_row">
            <div class="row_value">0</div>
            <svg-icon icon-class="dashboard_liuliang"></svg-icon>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="18">
        <el-card>
          <div slot="header">动态</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="mar_bot_10">
          <div slot="header">更新</div>
        </el-card>
        <el-card class="mar_bot_10">
          <div slot="header">链接</div>
        </el-card>
        <el-card class="mar_bot_10">
          <div slot="header">寄语</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["user"]),
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;

    ::v-deep {
      .el-card__header {
        font-size: 14px;
        padding: 15px;
      }
    }
  }
}
.align_center {
  text-align: center;
}
.mar_bot_10 {
  margin-bottom: 10px;
}
.flex_row{
  display: flex;
  font-size: 40px;
}
.row_value{
  flex: 1;
  text-align: center;
  font-size: 29px;
  border-right: 1px solid #eee;
  margin-right: 20px;
}
</style>
